﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="uploadIDCard.aspx.cs" Inherits="uploadIDCard2" %>

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <link rel="stylesheet" type="text/css" href="uploader/css/cropper.min.css">
    <link rel="stylesheet" type="text/css" href="uploader/css/mui.min.css">


    <title><%= SectionProxyData.GetSetValue(2) %></title>
    <link rel="stylesheet" href="pic_uploader/css/LUploader.css">


    <script type="text/javascript" src="uploader/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="uploader/js/lrz6.mobile.min.js"></script>
    <script type="text/javascript" src="uploader/js/lrz.all.bundle.js"></script>
    <script type="text/javascript" src="uploader/js/cropper.min.js"></script>



    
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            background-color: #19b5ee;
            color: #fff;
            font-size: 25px;
            text-align: center;
            padding: 4px;
            margin:0;
        }

        li {
            list-style-type: none;
        }

        input {
            outline: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .LUploader .LUploader-progress {
            display:none;
        }
    </style>
</head>

<body>

  
    <div id="showResult">
        <div style="width: 50%; margin: 0 auto; margin-top: 10px; display:none;">
       
            <input data-luploader='demo1' type="file" accept="image/*"  id="image" />
        </div>

    </div>

    <div class="LUploader" id="demo1" style="height:200px;">
        <div class="LUploader-container" id="picbox">
            
            <ul class="LUploader-list"></ul>
        </div>
        <div style="padding-top:50px;">
            <div class="icon icon-camera font20"></div>
            <p>单击上传身份证照片</p>
        </div>
    </div>





    <div id="showEdit" style="display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9;">
        <div style="width: 100%; position: absolute; top: 10px; left: 0px;">
            <button class="mui-btn" data-mui-style="fab" id='cancleBtn' style="margin-left: 10px;">取消</button>
            <button class="mui-btn" data-mui-style="fab" data-mui-color="primary" id='confirmBtn' style="float: right; margin-right: 10px;">确定</button>
        </div>
        <div id="report">
            <img src="" style="width: 300px; height: 300px">
        </div>

    </div>
    <div style="width: 98%; margin: 50px auto;  display:none;">

        <textarea name="txt" rows="10" id="basetxt" style="width: 100%; border-radius: 5px" onclick="this.checked = true" placeholder="base64码"></textarea>

    </div>

</body>

    <script src="javascript/jCommon.js"></script>
    <script src="javascript/spin.min.js"></script>

</html>
    <script type="text/javascript">
        $(function () {

            function toFixed2(num) {
                return parseFloat(+num.toFixed(2));
            }

            $('#cancleBtn').on('click', function () {
                $("#showEdit").fadeOut();
                $('#showResult').fadeIn();
            });

            $('#confirmBtn').on('click', function () {

            
                Loader.show("#picbox");


                $("#showEdit").fadeOut();
                var $image = $('#report > img');
                var dataURL = $image.cropper("getCroppedCanvas");
                var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
                $("#basetxt").val(imgurl);
                $('#showResult').fadeIn();
                $("#picbox").css("background-image", 'url(' + imgurl + ')');
                //post服务器。
                sendimg(imgurl)
               


            });

            function sendimg(b64img) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                  
                    if (xhr.readyState == 4) {
                        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                            Loader.hide();
                        

                            //
                        } else {
                            //
                        }
                    }
                };
                xhr.open("post", "saveidCard.ashx?id=" + request("id") + "&ext=jpeg", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded ");
                xhr.send("formFile=" + encodeURIComponent(b64img));
            }


            function cutImg() {
                Loader.hide();
                $('#showResult').fadeOut();
                $("#showEdit").fadeIn();
                var $image = $('#report > img');
                $image.cropper({
                    aspectRatio: 1 / 1,
                    autoCropArea: 0.7,
                    strict: true,
                    guides: false,
                    center: true,
                    highlight: false,
                    dragCrop: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    zoom: -0.2,
                    checkImageOrigin: true,
                    background: false,
                    minContainerHeight: 400,
                    minContainerWidth: 300
                });
            }

            function doFinish(startTimestamp, sSize, rst) {
                var finishTimestamp = (new Date()).valueOf();
                var elapsedTime = (finishTimestamp - startTimestamp);
                //$('#elapsedTime').text('压缩耗时： ' + elapsedTime + 'ms');

                var sourceSize = toFixed2(sSize / 1024),
                    resultSize = toFixed2(rst.base64Len / 1024),
                    scale = parseInt(100 - (resultSize / sourceSize * 100));
                $("#report").html('<img src="' + rst.base64 + '" style="width: 100%;height:100%">');
                cutImg();
            }

            $('#image').on('change', function () {

                if (this.value.length == 0) {
                    return;
                }


                Loader.show("#demo1");
                var startTimestamp = (new Date()).valueOf();
                var that = this;
                lrz(this.files[0], {
                    width: 800,
                    height: 800,
                    quality: 0.7
                })
                    .then(function (rst) {

                        //console.log(rst);
                        doFinish(startTimestamp, that.files[0].size, rst);
                        return rst;
                    })
                    .then(function (rst) {
                        // 这里该上传给后端啦
                        // 伪代码：ajax(rst.base64)..

                        return rst;
                    })
                    .then(function (rst) {
                        // 如果您需要，一直then下去都行
                        // 因为是Promise对象，可以很方便组织代码 \(^o^)/~
                    })
                    .catch(function (err) {
                        // 万一出错了，这里可以捕捉到错误信息
                        // 而且以上的then都不会执行

                        alert(err);
                    })
                    .always(function () {
                        // 不管是成功失败，这里都会执行
       
                    });
            });

            $(".LUploader").click(function ()
            {
                $('#image').click();
            })

        });
    </script>